<template>
  <div>
    <tableComponents :pagination="{
        currentPage,
        pageSize: pagesize,
        total: course_list.all_num
      }" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" @sendUserSearch="receive_search"
        :searchData="userSearchData" :isHaveExport="false" @toAdd="addLesson('')">
      <template v-slot:table>
        <el-table ref="multipleTable" :data="course_list.data" v-loading="loading" element-loading-text="拼命加载中" stripe
            header-row-class-name="head_color" tooltip-effect="dark" :default-sort="{ prop: 'sort' }" style="width: 99.8%">
          <el-table-column prop="sort" sortable :sort-method="sorta" label="排序" min-width="55">
            <template slot-scope="scope">
              <el-input @change="sortNew(scope.$index, scope.row)" v-model.number="scope.row.sort" autocomplete="off" size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="课程封面" min-width="80">
            <template slot-scope="scope">
              <div style="width: 120px; padding:10px;">
                <img style="width:100%" :src="$fnc.getImgUrl(scope.row.piclink)" alt />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="课程名称" min-width="140">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>
          <el-table-column label="课程实价" min-width="120">
            <template slot-scope="scope">{{ $fnc.toFixedZ(scope.row.price) }}元</template>
          </el-table-column>

          <el-table-column label="课程市场价" min-width="120">
            <template slot-scope="scope">{{ $fnc.toFixedZ(scope.row.market_price) }}元</template>
          </el-table-column>
          <el-table-column label="课程成本" min-width="120">
            <template slot-scope="scope">{{ $fnc.toFixedZ(scope.row.cost) }}元</template>
          </el-table-column>
          <el-table-column label="课程信息" min-width="120">
            <template slot-scope="scope">
              <div>
                <span style="    font-weight: bold;">点击量：</span>
                <span>{{ scope.row.hit || 0 }}</span>
                <br />
                <span style="    font-weight: bold;">点赞量：</span>
                <span>{{ scope.row.likes || 0 }}</span>
                <br />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="人物头像" min-width="80" align="center">
            <template slot-scope="scope">
              <div class="user_table">
                <img :src="$fnc.getImgUrl(scope.row.avatar)" style="width:80px;height:80px;border-radius:50%;" alt />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="人物信息" min-width="120">
            <template slot-scope="scope">
              <div>
                <span style="    font-weight: bold;">标题：</span>
                <span>{{ scope.row.nickname || "---" }}</span>
                <br />
                <span>简介：</span>
                <small>{{ scope.row.introduction || "---" }}</small>
                <br />
                <span>分类：</span>
                <small>{{ scope.row.cate_id_cn || "---" }}</small>
                <br />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="点赞量" min-width="50">
            <template slot-scope="scope">{{ scope.row.likes || 0 }}</template>
          </el-table-column>

          <el-table-column label="是否上架" min-width="130" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-switch class="zdySwith" :width="82" v-model="scope.row.show" active-color="#13ce66" inactive-color="#ffffff" active-text="上架"
                  inactive-text="下架" active-value="1" @change="getIsShow($event, scope.row)" inactive-value="0"></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="是否付费" min-width="130" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-switch class="zdySwith" :width="82" v-model="scope.row.is_free" active-color="#13ce66" inactive-color="#ffffff" active-text="收费"
                  inactive-text="免费" active-value="1" @change="getIsfree($event, scope.row)" inactive-value="0"></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="220">
            <template slot-scope="scope">
              <el-button :loading="$store.state.isLoading" size="mini" type="primary" :disabled="
                  scope.row.video != 0 && scope.row.video != '' ? false : true
                " @click="playVideo(scope.row)">查看视频</el-button>
              <el-button :loading="$store.state.isLoading" size="mini" type="primary" @click="
                  $router.push({
                    path: '/index/shop/course_stage',
                    query: { id: scope.row.id }
                  })
                ">查看课程集</el-button>
              <el-button :loading="$store.state.isLoading" size="mini" type="primary" @click="addLesson(scope.row.id)">编辑</el-button>
              <el-button :loading="$store.state.isLoading" size="mini" type="danger" @click="delete_course(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog width="600" append-to-body custom-class="vide0-con" :visible.sync="showVideo" @close="close_video_now">
      <video id="video" autoplay="autoplay" :src="$fnc.getImgVideo(itemForm.video)" width="600" height="400" controls="controls">
        您的浏览器不支持视频播放
      </video>
    </el-dialog>
  </div>
</template>
<script>
import { courseSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  name: "course",
  data () {
    return {
      userSearchData: courseSearchData,
      dioLoading: false,
      // multipleSelection: [],
      cate_option: [],
      course_list: {
        data: []
      },
      itemForm: {
        video: "",
        title: ""
      },
      showVideo: false,
      loading: false,
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      serarch_from: {},
      formLabelWidth: "120px"
    };
  },

  created () {
    this.get_course_list();
    this.get_cate_list();
  },
  methods: {
    addLesson (id) {
      if (id) {
        let routeData = this.$router.resolve({
          path: "/index/shop/add_course",
          query: { id }
        });
        window.open(routeData.href, "_blank");
      } else {
        let routeData = this.$router.resolve({
          path: "/index/shop/add_course"
        });
        window.open(routeData.href, "_blank");
      }
    },
    getIsfree (val, row) {
      var params = {};
      params = row;
      params.is_free = val;
      this.$api.getShops.edit_courselist(params).then(res => {
        if (res.data.code == 200 && res.data.result) {
          return false;
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
        }
      });
    },
    sorta (a, b) {
      return b - a;
    },
    sortNew (index, row) {
      var params = {};
      params.id = row.id;
      params.title = row.title;
      params.cid = row.cid;
      params.sort = row.sort;
      params.price = row.price;
      params.market_price = row.market_price;
      params.piclink = row.piclink;
      params.cost = row.cost;
      this.$api.getShops.edit_courselist(params).then(res => {
        if (res.data.code == 200 && res.data.result) {
          return false;
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
        }
      });
    },
    playVideo (item) {
      this.itemForm = item;
      this.showVideo = true;
    },
    close_video_now () {
      document.getElementById("video").pause();
    },

    delete_course (id) {
      //删除
      this.$swal({
        title: "您确定要删除这些信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          this.$api.getShops.del_courselist({ id: id }).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.get_course_list();
            } else {
              this.$swal("删除失败！", res.data.result, "error");
              this.get_course_list();
            }
          });
        }
      });
    },

    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    receive_search (form) {
      this.serarch_from = form;
      this.get_course_list(form);
    },
    get_cate_list () {
      this.loading = true;
      this.$api.getShops.get_selcate({}).then(res => {
        if (res.data.code == 200) {
          this.cate_option = res.data.result;

          for (var i in this.cate_option) {
            this.cate_option[i].title = this.cate_option[i].cate_name;
          }
          this.$store.commit("setCourseCate", this.cate_option);
          this.loading = false;
        } else {
          this.$fnc.alertError(res.data.result);
          this.loading = false;
        }
      });
    },
    get_course_list (data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;
      this.$api.getShops.get_courselist(params).then(res => {
        if (res.data.code == 200) {
          this.course_list = res.data.result;
          this.loading = false;
        } else {
          this.$fnc.alertError(res.data.result);
          this.loading = false;
        }
      });
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      //每页下拉显示数据
      var params = this.serarch_from;
      params.page = "1";
      params.page_size = size;
      this.get_course_list(params);
      this.pageSize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      var params = this.serarch_from;
      params.page = currentPage;
      params.page_size = this.pageSize;
      this.get_course_list(params);
    },
    getIsShow (val, row) {
      var params = {};
      params = row;
      params.show = val;
      this.$api.getShops.edit_courselist(params).then(res => {
        if (res.data.code == 200 && res.data.result) {
          return false;
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
        }
      });
    }
  }
};
</script>
<style scoped>
.vide0-con {
  background-color: transparent !important;
  border: none;
  box-shadow: none;
  width: 600px;
}
.vide0-con .el-dialog__header {
  display: none;
}
.el-button {
  margin: 5px;
}
</style>
